/*------------------------------------*\
    #VARIABLES
\*------------------------------------*/

/**
 * CONTENTS
 *
 * COLORS
 * Brand Colors...............Globally-available variables and config
 * Neutral Colors.............Grayscale colors, including white and black
 * Utility Colors.............Info, Warning, Error, Success
 *
 * TYPOGRAPHY
 * Font Families..............The fonts used in the design system
 * Sizing.....................Font sizing
 *
 * LAYOUT
 * Max-widths.................Maximum layout container width
 *

 * SPACING
 * Spacing defaults...........Spacing between elements
 *
 * BORDERS
 * Border Width...............Border thicknesses
 * Border Radius..............Border radius definitions
 *
 * ANIMATION
 * Animation Speed............Transition/animation speed variables
 * Animation easing...........Easing variables
 *
 * BREAKPOINTS
 * Breakpoints................Global breakpoint definitions
 */

/*------------------------------------*\
     #COLORS
 \*------------------------------------*/

/**
 * Brand Colors
 * 1) Brand=specific colors
 */
$color-brand-purple: #aa85ba;
$color-brand-purple-dark: #22062e;
$color-brand-purple-light: #f9f5fc;
$color-brand-green: #7ec699;
$color-brand-green-dark: #376548;
$color-brand-green-light: #f4fdf6;
$color-brand-orange: #eeb31b;
$color-brand-orange-dark: #946900;
$color-brand-orange-light: #fef8ea;

/**
 * Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the UI
 */
$color-white: #fff;
$color-gray-02: #f2f2f2;
$color-gray-07: #eee;
$color-gray-13: #ddd;
$color-gray-27: #bbb;
$color-gray-50: #777677;
$color-gray-60: #666;
$color-gray-73: #444;
$color-gray-88: #1f1f1f;
$color-gray-93: #131313;
$color-black: #000;

/**
 * Utility Colors
 * 1) Utility colors are colors used to provide feedback, such as alert messages,
 *    form validation, etc.
 */
$color-utility-info: #0192d0;
$color-utility-info-light: #d3f2ff;
$color-utility-error: #b12a0b;
$color-utility-error-light: #fdded8;
$color-utility-success: #03804d;
$color-utility-success-light: #d4f3e6;
$color-utility-warning: #a59b15;
$color-utility-warning-light: #fffecf;

/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/

/**
 * Font Family
 */
$font-primary: neue-haas-grotesk-display, sans-serif;
$font-secondary: monospace;

/**
 * Font Sizing
 */
$font-size-sm: 0.75rem;
$font-size-sm-2: 0.85rem;
$font-size-med: 1rem;
$font-size-med-2: 1.2rem;
$font-size-large: 2rem;
$font-size-large-2: 2.6rem;
$font-size-xl: 5rem;

$font-weight-bold: 700;

/**
 * Line Height
 */
$line-height-sm: 0.8;
$line-height-sm-2: 0.9;
$line-height-med: 1;
$line-height-med-2: 1.2;
$line-height-large: 1.6;
$line-height-xl: 1.8;

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/

/**
 * Max Width
 */
$l-max-width: 70rem !default;
$l-linelength-width: 40rem !default;

$l-sidebar-width: 18.75rem;

/*------------------------------------*\
    #SPACING
\*------------------------------------*/

/**
 * Spacing and offsets
 * 1) Used to space grids and body padding
 */

$spacing: 1rem;
$spacing-small: round(0.5 * $spacing);
$spacing-large: round(2 * $spacing);
$spacing-xl: round(4 * $spacing);

/*------------------------------------*\
    #BORDERS
\*------------------------------------*/

/**
 * Border
 */
$border-width: 1px;
$border-width-thick: 0.5rem;

/**
 * Border radius
 */
$border-radius: 4px;

/*------------------------------------*\
    #ANIMATION
\*------------------------------------*/

/**
 * Transition Speed
 */
$anim-fade-quick: 0.15s;
$anim-fade-long: 0.4s;

/**
 * Transition Ease
 */
$anim-ease: ease-out;

/*------------------------------------*\
    #BREAKPOINTS
\*------------------------------------*/

/**
 * Breakpoints used in media queries
 * 1) These are not the only breakpoints used, but they provide a few defaults
 */
$bp-small: 28em;
$bp-med: 47em;
$bp-large: 60em;
$bp-xl: 70em;

:root {
   --scrollbar-track-color: transparent;
   --scrollbar-color: rgba(0, 0, 0, 0.2);

   --scrollbar-size: 0.375rem;
   --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
}
